<template>
  <view class="navbar" @click="goSearch">
    <view class="search-bar">
      <view class="icon-search">
        <img src="../../../static/icons/search.svg" class="svg-icon" />
      </view>
      <input class="search-input" placeholder="搜索爆款产品..." />
    </view>
    <view class="icon-notice">
      <img src="../../../static/icons/notice.svg" class="svg-icon" />
      <text class="badge">2</text>
    </view>
  </view>
</template>

<script setup>
// 暂无逻辑

const goSearch = () => {
  uni.navigateTo({
    url: '/pages/index/search'
  });
};

</script>

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  padding: 10rpx 0 0 0;
  background: #fff;
  width: 100%;
}
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 3rpx solid #f2f2f2;
  border-radius: 40rpx;
  padding: 0 0 0 24rpx;
  height: 80rpx;
  flex: 1;
  margin-right: 32rpx;
}
.icon-search {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}
.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 30rpx;
  flex: 1;
  color: #222;
}
.icon-notice {
  position: relative;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-notice img {
  display: block;
}
.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff0000;
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  font-size: 18rpx;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.svg-icon {
  width: 40rpx;
  height: 40rpx;
  display: block;
}
</style>
